<template>
	<view class="">
		<view>
			<uv-tabs :list="data.itemList" @click="clickList" lineWidth="30"
				:activeStyle="{ color: '#333', fontSize: '30rpx' }" v-if="data.itemList"
				:inactiveStyle="{ color: '#909090', fontSize: '30rpx' }" :scrollable="false" lineColor="#7B7C7B"
				:current="data.kindIndex"></uv-tabs>
		</view>
 
		<view v-if="data.kindIndex == 0" class="plr-24">
			<!-- <view v-if="data.list?.length <= 0" class="Flex height-640"
				@click.stop="addOpen('/pages/mine/createPulser')">
				<view><uv-icon name="plus" color="#E1E1E1" size="30rpx" bold></uv-icon></view>
				<view class="size-30 color-black3 ml-10">点击创建脉星人</view>
			</view> -->
			<view class="listClass">
				<!-- <input type="file"  /> -->
				<!-- <button >上传文件</button> -->
				<view @click.stop="uploadImage" style="height:485rpx;"
					class="itemClass pointer relative radius-16 hidden bgMinor5 center">
					<view class="center">
						<uv-icon name="plus" color="#E1E1E1" size="100rpx" bold></uv-icon>
					</view>
				</view>
				<view v-for="(item, index) in data.list" :key="index" @click.stop="handleItem"
					class="itemClass pointer relative radius-16 hidden">

					<view class="flex" style="width: 315rpx;height: 420rpx;overflow: hidden;"
						@click.stop="addOpen('/pages/mine/veinManDetails?flag=veinMan1&user=' + item.id)">
						

						<image :src=" item.imgUrl" mode="aspectFill" style=" max-width: 100%;height: 420rpx;"></image>
						

					</view>
					<view class="bgMinor5 flex pd-16">
						<view class="flex flex-1">
							<uv-image :src="item.avatar" width="32rpx" height="32rpx" shape="circle"></uv-image>
							<view class="size-15 ml-16 color-black3 line-hiding-1 flex-1">{{item.realname}}</view>
						</view>
						<view class="flex" @click.stop="handleUse(item)">
							<view class="shiyong">使用</view>
							<!-- <uv-image v-if="index === 0" src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx" mode="scaleToFill"></uv-image>
							<uv-image v-else src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx" mode="scaleToFill"></uv-image> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="data.kindIndex == 1" class="plr-24">
			<view class=" mt-40">
				<view
					style="font-size: 30rpx;color: rgb(204, 204, 204);height: 40vh;display: flex;align-items: center;justify-content: center;width: 100%;">
					功能暂未开放</view>
			</view>
			<!-- <view class="mt-30 tc lineHeight1">
				<view class="size-32">总收益(元)</view>
				<view class="mt-20 numClass">9999</view>
			</view>
			<view class="listClass mt-40">
				<view v-for="(item, index) in 2" :key="index" @click.stop="handleItem" class="itemClass pointer relative radius-16 hidden">
					<view class="flex">
						<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="315rpx" height="420rpx"></uv-image>
					</view>
					<view class="bgMinor5 flex pd-16">
						<view class="flex flex-1">
							<uv-image src="https://cdn.uviewui.com/uview/album/1.jpg" width="32rpx" height="32rpx" shape="circle"></uv-image>
							<view class="size-15 ml-16 color-black3 line-hiding-1 flex-1">Maverick</view>
						</view>
						<view class="flex" @click.stop="handleUse">
							<view class="jiage">￥39</view>
							<uv-image v-if="index === 0" src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx" mode="scaleToFill"></uv-image>
							<uv-image v-else src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx" mode="scaleToFill"></uv-image>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<!-- :closeOnClickOverlay="false" -->
		<!-- @change="usePopup" -->
		
	</view>
	<uv-popup ref="popupUseRef" style="z-index: 110;" mode="bottom"  round="16rpx">
		<view class="pb-20">
	
			<!-- <view class="tc textName border-b-2 color-blue1"  2025-05-08
				@click="addOpen('/pages/homepage/customization?tab=1&current=1&id=' + data.user.id)">个性定制
			</view> -->
			<view class="tc textName border-b-2"
				@click="addOpen('/pages/homepage/rehandling?tab=1&current=1&id=' + data.user.id)">一键换装</view>
			<!-- 用户如果已经发布，此处显示“取消发布”。发布到广场-脉星人 -->
			<view class="tc textName"
				@click.stop="addOpen('/pages/mine/veinManDetails?flag=veinMan1&user=' + data.user.id)">
				发布</view>
				<view class="tc textName" style="visibility: hidden"
					@click.stop="addOpen('/pages/mine/veinManDetails?flag=veinMan1&user=' + data.user.id)">
					发布</view>
			<!-- <view>取消发布</view> -->
		</view>
	</uv-popup>
</template>

<script setup lang="ts">
	import { reactive, ref, nextTick, onMounted } from 'vue';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { onLoad } from '@dcloudio/uni-app';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	import { baseURL } from '@/utils/config.ts';
	import { get, post, baseConfig } from '@/utils/request';
	import { onShow } from '@dcloudio/uni-app';
	const useLogin = useLoginStore();
	// console.log('useLoginuseLogin',useLogin);

	const popupUseRef = ref(null);
	/** @name 数据 */
	const data = reactive({
		total: 0,
		pages: 0,
		pageNo: 1,
		pageSize: '',
		itemList: [{ name: '我的创作' }, { name: '我的收益' }],
		kindIndex: 0,
		hasMoreData: true,
		isLoading: false,
		list: [],
		user: {},
		userName: uni.getStorageSync('Token') ? uni.getStorageSync('Token') : JSON.parse(sessionStorage.getItem('userData')).username
	});
	onLoad((options : any) => {
		// 
		data.kindIndex = null
		setTimeout(() => {
			data.kindIndex = 0
		}, 800)
	});


	// nextTick(() => {
	// 	popupUseRef.value?.open();
	// })

	/** @name 添加 */
	function handleAction() {

	}

	/** @name 切换选择 */
	function clickList(e) {
		data.kindIndex = e.index;
	}

	/** @name xxx */
	async function handleItem() { }

	/** @name 使用弹框变化事件 */
	async function usePopup(e) {
		console.log('usePopup', e);
		if (e.show) {
			// #ifdef H5
			uni.hideTabBar(); // 隐藏tabbar
			// #endif
		} else {
			// #ifdef H5
			uni.showTabBar(); // 显示tabbar
			// #endif
		}
	}

	/** @name 使用 */
	async function handleUse(val) {
		
		data.user = val
		popupUseRef.value?.open();
	}
	const fetchData = async (val) => {
		console.log('4444')
		console.log(JSON.parse(val.data).message)
		try {
			const response = await post<{
				price : Number;
				imgUrl : String;
			}>('/maixing/add', { imgUrl: JSON.parse(val.data).message });

			if (response) {
				listFun()
				if (response.data) {

					data.list = JSON.parse(response.data)
				}
				console.log(data.list)

			}
		} catch (error) {
			console.error(error);
		}
	};
	async function uploadImage() {
		uni.chooseImage({
			count: 1, // 默认9
			sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: (res) => {
				uni.uploadFile({
					url: baseURL + 'sys/common/upload', // 替换为实际的上传接口地址
					filePath: res.tempFilePaths[0],
					name: 'file',
					header: {
						'X-Access-Token': uni.getStorageSync('Token') ? uni.getStorageSync('Token') : sessionStorage.getItem('Token')
					},
					// 
					formData: {
						"type": "1"
						// 这里可以添加其他表单数据
						// file: res.tempFiles[0],
					},
					success: (uploadRes) => {
						// data.list = []
						// console.log('上传成功', uploadRes);
						fetchData(uploadRes)

					},
					fail: (err) => {
						console.error('上传失败', err);
					}
				});
			}
		});
	}
	// const listFun = async () => {
	// 	console.log('============')
	// 	try {
	// 		const response = await get<{
	// 			type : Number,

	// 		}>('maixing/getList', { type: 1 });

	// 		if (response) {
	// 			// listFun()
	// 			data.list = response.result.records

	// 		}
	// 		// data.list = data.list.result.records

	// 	} catch (error) {
	// 		console.error(error);
	// 	}
	// };

	const listFun = async () => {

		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number
			}>('maixing/getList', { pageNo: data.pageNo, pageSize: 10, type: 1 });
			if (response.code == 200) {

				data.pages = response.result.pages
				data.total = response.result.total
                if(data.pages > 1 ){
					data.list = [...data.list, ...response.result.records]
				}else{
					data.list = [...response.result.records]
				}
				
				console.log('----')
                 console.log(data.list)
				// setTimeout(() => {
				// 	if (data.pageNo < data.pages) {
				// 		console.log("你加载了吗 ")
				// 		loadMoreData()
				// 	}
				// }, 1000);
			}

		} catch (error) {
			console.error(error);
		}
	};

	const loadMoreData = () => {
		console.log('ppppp')
		if (!data.isLoading && data.hasMoreData) {

			console.log("有没有加载方法")
			if (data.pageNo < data.pages) {
				data.pageNo++;

				listFun()
			} else {
				data.hasMoreData = false
				setTimeout(() => {
					data.hasMoreData = true
				}, 800)
			}


		}
	};

	const ToLoweOnScrollr = () => {
		if (!data.isLoading && data.hasMoreData) {
			if (data.pageNo < data.pages) {
				data.pageNo++;
				listFun()
			} else {
				data.hasMoreData = false
				setTimeout(() => {
					data.hasMoreData = true
				}, 800)
			}
			// this.fetchData();
		}

	}
	onShow(() => {
		

		setTimeout(() => {

			// console.log(data.list)
			// listFun()
			// console.log('000')
			data.kindIndex = 0
		}, 800)

		uni.$on('refreshData', (res) => {
			console.log('0000')
			if (res.refresh) {
				// data.list = []
				//更新数据
				listFun()
			
				setTimeout(() => {
					
				})
			}
		})

		// console.log('1111')
		// listFun()
	});

	// onLoad(() => {
	// 		console.log('5555')
	// 	listFun()
	// });

	defineExpose({
		listFun,
		loadMoreData,
	});

	onMounted(() => {
		console.log('99995959')
		// data.list = []
		listFun()
	});
</script>
<style>
	/deep/ .u-tabs__wrapper__nav__line {
		left: 108rpx;
	}
</style>
<style scoped lang="scss">
	.uv-tabs__nav {
		text-align: left;
	}

	// :deep(.checklist-box) {
	// 	//  模版
	// }

	.listClass {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 分为三列，每列宽度相等 */
		gap: 24rpx;
	}

	.shiyong {
		padding: 0 6rpx;
		color: $ai-primary;
		font-size: 18rpx;
		border: 1px solid $ai-primary;
		border-radius: 6rpx;
	}


	.numClass {
		font-size: 50rpx;
		font-weight: 700;
		background: -webkit-linear-gradient(#ffc800, #ff0053, #ff5037); // , 100%,#ff5037 left top,
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.jiage {
		padding: 0 6rpx;
		font-size: 18rpx;
		font-weight: 700;
		// border: 2px solid;
		// border: 6px solid transparent;

		border-style: solid;
		border-width: 1px;
		border-image: linear-gradient(to bottom, #ffc800, #ff0053, #ff5037) 1;
		border-radius: 6rpx;
		clip-path: inset(0 0 round 6rpx);
		background: -webkit-linear-gradient(#ffc800, #ff0053, #ff5037); // , 100%,#ff5037 left top,
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;


		// position: relative;
		// background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
		// border-radius: 5px;

		// &::after {
		//   content: '';
		//   position: absolute;
		//   top: 2px;
		//   left: 2px;
		//   right: 2px;
		//   bottom: 2px;
		//   background: white;
		//   border-radius: 3px;
		// }
		// &::before {
		//   content: '';
		//   position: absolute;
		//   top: -2px;  /* 控制边框粗细 */
		//   left: -2px;
		//   right: -2px;
		//   bottom: -2px;
		//   z-index: -1;
		//   background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
		//   border-radius: 10px; /* 需要比容器大 2px */
		// }
	}
</style>